<template>
  <div class='IconSelect'>
    <el-select
        clearable
        v-bind="attrs"
        v-model="showValue"
        filterable
        remote
        reserve-keyword
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="loading"
    >
      <template #label="{ label, value }" v-if="selectData && selectData.url">
        <el-image :src="baseUrl+selectData.url" style="width: 16px; height: 16px"/>
      </template>
      <el-row :gutter="20" style="width: 300px">
        <el-col :span="6" :key="icon.iconId" v-for="(icon,index) in options">
          <el-option :label="icon.fileName" :value="icon.iconId">
            <el-image :src="baseUrl+icon.url" style="width: 20px; height: 20px"/>
          </el-option>
        </el-col>
      </el-row>
    </el-select>
  </div>
</template>
<script setup name="IconSelect">
import {
  selectEmits,
  selectMixin,
  selectProps
} from '@/components/EbComponent/Selector/IconSelect/iconSelectMixin.js'
import {listIcons} from "@/api/easybook/icons.js";
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const props = defineProps({
  ...selectProps(),
})
const emit = defineEmits([...selectEmits()])
const {
  ready,
  selectData,
  loading,
  options,
  showValue,
  remoteMethod,
  attrs
} = selectMixin(
    props,
    {
      emit,
      idKey: 'iconId',
      nameKey: 'fileName',
      dataKey: 'rows',
      api: listIcons
    });
</script>
<style scoped lang='scss'>
.IconSelect {
}
</style>
